<template>
  <div class="home" style="overflow-y:auto">
    <div>
      <div style="width:100%">
        <van-swipe class="my-swipe" indicator-color="white">
            <van-swipe-item v-for="(item,index) in var2.bannaners" :key="index">
              <img style="width:100%;" src="@/assets/images/banner1.jpg" alt="">
            </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="s4" v-for="(item,index) in menuInTitles" :key="index">
      <div class="s4_title">
        <div style="width: 6.26vw;margin-left: 1.3vw;">
          <div class="icon-left">
            <img :src="`./static/iconLeft/product-top-logo${item.orderNum-1}.png`" alt="">
          </div>
        </div>
        <div>
          <h5 style="font-size: 4.26vw;color: #3562d9;margin:0;margin-left: 4.26vw;">{{item.pathName}}</h5>
          <div class="menuBox">

              <div class="value3" v-if="item.isShow == 's3'">
                <div class="img-1">
                  <img src="../../assets/images/icon/terminal/terminal1.jpg" alt="智能音箱" >
                </div>
                <div class="img-1">
                  <img src="../../assets/images/icon/terminal/terminal2.jpg" alt="摄像头" >
                </div>
                <div class="img-1">
                  <img src="../../assets/images/icon/terminal/terminal3.jpg" alt="千兆路由器" >
                </div>
              </div>

              <div class="value4" v-if="item.isShow == 's2'">
              <img src="../../assets/images/icon/family/product5.jpg" alt="沃家组网" >
              <img src="../../assets/images/icon/family/product6.jpg" alt="沃家神眼" >
              <img src="../../assets/images/icon/family/product7.jpg" alt="沃家固话" >
              <img src="../../assets/images/icon/family/product8.jpg" alt="沃家电视" >
              </div>
              <div class="value4" v-if="item.isShow == 's1'">
              <img src="../../assets/images/icon/tongxin/product2.jpg" alt="沃家组网" >
              <img src="../../assets/images/icon/tongxin/product1.jpg" alt="沃家神眼" >
              <img src="../../assets/images/icon/tongxin/product3.jpg" alt="沃家固话" >
              <img src="../../assets/images/icon/tongxin/product4.jpg" alt="沃家电视" >
              </div>

            
            <!-- <div class="install-broadband">
              <img src="../../assets/images/icon/tongxin/tele-product1.png" alt="我要装宽带">
            </div>
            <div class="phoneIpBox" style="margin-right: 4%;">
                <div class="phone-card">
                  <img src="../../assets/images/icon/tongxin/tele-product2.png" alt="我要办手机卡">
                </div>
                <div class="ipTV">
                  <img src="../../assets/images/icon/tongxin/tele-product3.png" alt="我要看ipTV">
                </div>  
            </div> -->
          </div>
        </div>
      </div>
  </div>

<!-- 宽带提速 -->
    <!-- <div class="s4" >
      <div class="s4_title">
        <div style="width: 6.26vw;margin-left: 1.3vw;">
          <img style="width:260%;" src="../../assets/images/icon/kuandai/product-top-logo4.png" alt="">
        </div>
        <div>
          <h5 style="font-size: 4.26vw;color: #3562d9;margin:0;margin-left: 4.26vw;">宽带提速产品</h5>
          <div class="menuBox" style="width: 100%; margin-top:2%">
            <div class="value3">
                <div class="img-1">
                <img src="../../assets/images/icon/kuandai/speed-up1.png" alt="网速升级" >
                </div>
                <div class="img-1">
                <img src="../../assets/images/icon/kuandai/speed-up2.png" alt="光猫升级" >
                </div>
                <div class="img-1">
                <img src="../../assets/images/icon/kuandai/speed-up3.png" alt="WiFI升级" >
                </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->

<!-- 四个值时显示的内容样式 -->

<!-- 智慧家庭 -->
    <!-- <div class="s4" >
      <div class="s4_title">
        <div style="width: 6.26vw;margin-left: 1.3vw;">
          <img style="width:260%;" src="../../assets/images/icon/family/product-top-logo2.png" alt="">
        </div>
        <div>
          <h5 style="font-size: 4.26vw;color: #3562d9;margin:0;margin-left: 4.26vw;">智慧家庭产品</h5>
          <div class="menuBox" style="width: 100%;flex-wrap: wrap;margin-top:2%">
            <div class="value4">
              <img src="../../assets/images/icon/family/product5.jpg" alt="沃家组网" >
              <img src="../../assets/images/icon/family/product6.jpg" alt="沃家神眼" >
              <img src="../../assets/images/icon/family/product7.jpg" alt="沃家固话" >
              <img src="../../assets/images/icon/family/product8.jpg" alt="沃家电视" >
            </div>
          </div>
        </div>
      </div>
    </div> -->

<!-- 3个值时显示的内容样式 -->
<!-- 智能终端 -->
    <!-- <div class="s4" >
      <div class="s4_title">
        <div style="width: 6.26vw;margin-left: 1.3vw;">
          <img style="width:140%;" src="../../assets/images/icon/terminal/product-top-logo3.png" alt="">
        </div>
        <div>
          <h5 style="font-size: 4.26vw;color: #3562d9;margin:0;margin-left: 4.26vw;">智能终端</h5>
          <div class="menuBox">
              <div class="value3">
                <div class="img-1">
                  <img src="../../assets/images/icon/terminal/terminal1.jpg" alt="智能音箱" >
                </div>
                <div class="img-1">
                  <img src="../../assets/images/icon/terminal/terminal2.jpg" alt="摄像头" >
                </div>
                <div class="img-1">
                  <img src="../../assets/images/icon/terminal/terminal3.jpg" alt="千兆路由器" >
                </div>
              </div>
          </div>
        </div>
      </div>
    </div> -->

  <!-- 底部查询服务 -->
  <div>
    <div class="queryText">
      <img src="../../assets/images/query/serve-top.png" alt="查询服务" style="width:100%">
    </div>
    
    <div>
      <div class="service-content">

        <div class="one-service" v-for="(item,index) in menuInTitles2" :key="index ">
          <img src="../../assets/images/query/serve-logo1.png" alt="用户信息查询">
          <h5>用户信息查询</h5>
          <div class="" style="width:100%">
            <img src="../../assets/images/query/serve1.png" alt="客户账单" style="width: 49%;height: 94%;">
            <img src="../../assets/images/query/serve2.png" alt="套餐余量" style="width: 49%;height: 94%;">
          </div>
        </div>

        <div class="one-service">
          <img src="../../assets/images/query/serve-logo2.png" alt="装修信息查询">
          <h5>用户信息查询</h5>
          <div class="" style="width:100%">
              <img src="../../assets/images/query/serve3.png" alt="装维人员信息" style="width: 49%;height: 94%;">
              <img src="../../assets/images/query/serve4.png" alt="装移修工单进度" style="width: 49%;height: 94%;">
          </div>
        </div>
      </div>
    </div>
  </div>

</div>



</template>

<script>
import Api from '@/api/api'
export default {
  name: 'home',
  data () {
    return {
      jsonData:'',
      bannerList:[],
      menuInTitles:[],
      menuInTitles2:[],
      var2:'',
      var3:'',
    }
  },
  mounted(){
    this.init()
  },
  created() {
    // // fetch方式实现跨域
    // fetch("/api/user/1",{
    //   method:'Get',
    // }).then(Response  => Response .json())
    // .then( data => {console.log(data)}) 
    // axios实现跨域
    this.$axios.get("/api/user/1").then(res => {
      console.log(res);
    })
  },
  
  methods:{
    init(){
      let api = new Api()
      api.getMenus(2).then(res => {
        console.log('@@@@@@@@@@@@@@',res)
        this.var2 = res.data.resultJson
        this.menuInTitles = res.data.resultJson.menuInTitle
        // console.log("!!!!!!!!"+this.menuInTitles);
      })
      api.getMenus(3).then(res => {
        console.log('@@@@@@@@@@@@@@',res)
        this.var3 = res.data.resultJson
        this.menuInTitles2 = res.data.resultJson.menuInTitle
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.home{
  margin-top: 40px;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #f9f9f9;
  .s4{
    margin-top: 0.75vh;
    background-color: #fff;
    padding: 1.87vh 3.7% ;
    .s4_title{
      display: flex;
    }
  }
}
.menuBox {
  display: flex;
  // flex-wrap:wrap;
  flex-direction:row;
  .install-broadband img {
    width: 91%;
    margin-top: 14%;
    
  }
  .phone-card img {
    width: 110%;
  }
  .ipTV img {
    width: 110%;
  }
}
.queryText{
  width: 43.7%;
    margin-left: auto;
    margin-right: auto;
}
.one-service {
  display: flex;
  flex-wrap:wrap;
  margin-top: 2.6vh;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
    img {
      width: 27.5px;
      height: 27.5px;
    }
    h5 {
    font-size: 4.26vw;
    color: #FFFFFF;
    margin-left: 2.4vw;
    margin-top: 1%;
    }
}
.service-content {
  margin-top: 0.9vh;
    background-image: url(../../assets/images/query/serve-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 3vh;
    padding-top: 1px;
    margin-bottom: 10%;
}
// .s3 {
//   &:nth-child(1) {
//     width: 35%;
//     margin-left:-7%
//   }
//   &:nth-child(-n+2) {
//     width: 35%;
//     margin-left:2%"
//   }
// }
.value3 {
  display: flex;
  justify-content: space-between;
  img {
    width: 100%;
  }
}
.value4 {
  display: flex;
  flex-wrap: wrap;
  img {
    width: 47%;
    margin-right: 2%;
    margin-top: 2%;
  }
}
.icon-left {
  width: 6.26vw;
  margin-left: 1.3vw;
  img {
    width:100%; 
    display: block;
  }
}
</style>
